<template>
  <a-card v-show="showTable" title="协办组织报名数据" style="margin-top: 20px">
    <s-table size="default" ref="table" rowKey="id" :columns="columns" :data="loadData">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="refundRate" slot-scope="text"> {{ accMul(text || 0, 100) }}% </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { accMul } from '@/utils/number'
import { getPartnerOrgList } from '@/api/activity/activity'
export default {
  components: {
    STable
  },
  props: {
    isExistJointly: {
      type: Boolean,
      defualt: false
    }
  },
  data() {
    return {
      showTable: false,
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        { title: '组织名称', dataIndex: 'orgName', ellipsis: true },
        { title: '报名数', dataIndex: 'totalTicketNum', ellipsis: true },
        { title: '浏览量', dataIndex: 'browseNum', ellipsis: true },
        { title: '浏览人数', dataIndex: 'browsePeopleNum', ellipsis: true },
        { title: '取消报名数', dataIndex: 'refundNum', ellipsis: true },
        { title: '取消率', dataIndex: 'refundRate', ellipsis: true, scopedSlots: { customRender: 'refundRate' } }
      ],
      pagination: {
        current: 1,
        size: 10
      },
      loadData: parameter => {
        return getPartnerOrgList(this.$route.query.activityId, parameter).then(res => {
          if (res.data.records.length > 0 && !this.disabled && this.isExistJointly) {
            this.showTable = true
          }
          return res
        })
      }
    }
  },
  methods: {
    accMul,
    refresh() {
      this.$refs.table.refresh(true)
    }
  }
}
</script>
